/**
 * User: Célia Calçada
 * Date: 10-08-2013
 * Trailer detail carousel view
 */

Ext.define('Mobile-app.view.TrailerDetail', {
    extend: 'Ext.Panel',
    alias: 'widget.trailerdetailpanel',

    requires: [
        'Ext.carousel.Carousel'
    ],

    config: {
        modal: true,
        centered: true,
        hideOnMaskTap: true,
        width: '80%',
        height: '90%',
        padding: '0 0 0 0',

        layout: {
            type: 'vbox',
            align: 'stretch'
        },
        items: [
            {
                itemId: 'trailer-carousel',
                xtype: 'carousel',
                cls: 'panel-letter',
                flex: 1,
                items: [
                    {
                        xtype: 'panel',
                        scrollable: true,
                        padding: '10 10 10 10',
                        items: {
                            xtype: 'toolbar',
                            docked: 'top',
                            ui: 'light',
                            title: $.t('main.detailed information')
                        },
                        tpl: new Ext.XTemplate(
                            '<b>', $.t('main.licensePlate'), ':</b> {licensePlate}<br><br>',

                            '<b>', $.t('main.connection date'), ':</b> {connectionDate:this.dateFormat}<br>',
                            '<b>', $.t('main.disconnection date'), ':</b> {disconnectionDate:this.dateFormat}<br><br>',
                            '<b>', $.t('main.local'), ':</b> {fractal}<br>',
                            '<b>', $.t('main.position'), ':</b> <a href="https://maps.google.pt/maps?q={latitude},{longitude}" target="_blank">{latitude:this.convertLatitude}, {longitude:this.convertLongitude}</a><br>',
                            '<b>', $.t('main.speed'), ':</b> {speed} Km/h<br>',
                            {
                                /***
                                 * Will format the date on a human readable format
                                 * @param timestamp
                                 * @returns {String}
                                 */
                                dateFormat: function (timestamp) {
                                    return !timestamp ? null : Ext.Date.format(new Date(timestamp), 'd-m-Y');
                                },
                                /**
                                 * Will translate the angle in directions
                                 * @param heading The angle in degrees [0,360]
                                 * @return String The heading format
                                 */
                                routeFormat: function (heading) {
                                    //set default angle
                                    var aCourse = 'N';
                                    //check the passed angle and get the alias
                                    if (heading <= 22.5) aCourse = $.t('general.compass N');
                                    else if (heading <= 67.5) aCourse = $.t('general.compass NE');
                                    else if (heading <= 112.5) aCourse = $.t('general.compass E');
                                    else if (heading <= 157.5) aCourse = $.t('general.compass SE');
                                    else if (heading <= 202.5) aCourse = $.t('general.compass S');
                                    else if (heading <= 247.5) aCourse = $.t('general.compass SW');
                                    else if (heading <= 292.5) aCourse = $.t('general.compass W');
                                    else if (heading <= 337.5) aCourse = $.t('general.compass NW');
                                    else aCourse = $.t('general.compass N');
                                    //return formatted heading
                                    return heading + 'º (' + aCourse + ')';
                                },
                                /***
                                 *
                                 * @param temp
                                 * @returns {string}
                                 */
                                tempFormat: function (temp) {
                                    return typeof temp !== 'string' && temp > -100 ? temp + 'ºC' : '-';
                                },
                                /***
                                 *
                                 * @param lat
                                 * @returns {String}
                                 */
                                convertLatitude: function (lat) {

                                    return this.convertCorToDec(lat, 'lat')
                                },
                                /***
                                 *
                                 * @param lng
                                 * @returns {String}
                                 */
                                convertLongitude: function (lng) {

                                    return this.convertCorToDec(lng, 'lng')
                                },

                                /**
                                 * Will receive coordinates in decimal degrees and transform in (aº b' c'') format
                                 * @param coordinate The coordinate in decimal degrees
                                 * @param  axis One of [lat,lng]
                                 * @return String The formatted coordinate
                                 */
                                convertCorToDec: function (coordinate, axis) {
                                    //check if lat and lng are defined
                                    if (!coordinate) return '';
                                    //set some local vars
                                    var sCor, d, m, s;
                                    //calculate position (North, South, East or West)
                                    if (axis == 'lat') {
                                        if (coordinate < 0) {
                                            axis = 'S';
                                            coordinate = Math.abs(coordinate);
                                        } else {
                                            axis = 'N';
                                        }
                                    }
                                    else {
                                        if (coordinate < 0) {
                                            axis = 'W';
                                            coordinate = Math.abs(coordinate);
                                        } else {
                                            axis = 'E';
                                        }
                                    }
                                    //calculate the latitude degrees, minutes and seconds
                                    sCor = coordinate.toString().split('.');
                                    d = sCor[0];
                                    m = ((coordinate - d) * 60).toString().split('.');
                                    s = ((((coordinate - d) * 60) - m[0]) * 60);
                                    m = m[0];
                                    //set values
                                    d = parseInt(d);
                                    m = Math.round(m);
                                    s = Math.round(s);
                                    //format sting
                                    sCor = axis + " " + d + "º " + m + "' " + s + "''";

                                    //return string
                                    return sCor;

                                }
                            }

                        )
                    },
                    {
                        xtype: 'panel',
                        scrollable: false,
                        layout: 'fit',
                        items: [
                            {
                                xtype: 'toolbar',
                                docked: 'top',
                                ui: 'light',
                                title: 'Mapa'
                            },
                            Ext.create('Ext.Map', {
                                mapOptions: {
                                    center: new google.maps.LatLng(38.524801, -8.891029),  //nearby Setúbal
                                    zoom: 12,
                                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                                    navigationControl: true,
                                    navigationControlOptions: {
                                        style: google.maps.NavigationControlStyle.DEFAULT
                                    }
                                }
                            })
                        ]
                    }
                ]
            }
        ],
        listeners: [
            {
                delegate: '#trailer-carousel',
                event: 'activeitemchange',
                fn: 'activeItemChange'
            }
        ]
    },

    /***
     * Fires when the activeItem configuration is changed by setActiveItem
     * @param carousel The Ext.Container instance.
     * @param value The new item being set
     * @param oldValue The existing item
     * @param eOpts The options object passed to Ext.util.Observable.addListener
     */
    activeItemChange: function(carousel, value, oldValue, eOpts){

        //check if the item active is the map
        if(value.down('map') instanceof Ext.Map){
            this.fireEvent('showMarker', value.down('map'));
        }
    },

    /***
     * Hide panel with animation
     * @param animation
     */
    hide: function (animation) {

        var me = this;

        //we fire this event so the controller can deselect all items immediately.
        me.fireEvent('hideanimationstart', me);

        //show the mask again
        me.callParent();
    }
});
